<template>

<div class="box">
    <div
  class="list-lis"
  >
  <ul class="infinite-list" 
    v-infinite-scroll="handleInfiniteOnLoad"
      style="overflow: auto"
      infinite-scroll-distance="1">
    <li v-for="(item, index) in renderDataList" :key="index">
      <a
        :href="item.url"
        target="_blank"
        rel="noopener"
        >{{index + 1}}、{{item.title}}</a
      >
    </li>
    <div v-if="scrollDisabled">数据加载完毕</div>
  </ul>
</div>
</div>
</template>

<script setup lang='ts'>
	import { useSystemStore } from "@/store/modules/system";
	import { useUserStore } from "@/store/modules/user";
    const api = inject('$base', null as any);
    const base = useSystemStore();
    const useStore = useUserStore();
const renderDataList = ref<any>([]); // 数据列表
  const listCount =ref<number>(0);
  const handleInfiniteOnLoad = () => {
    console.log('9999999')
    // 异步加载数据等逻辑
    if (scrollDisabled) {
        console.log('11111111')
      // 数据加载完毕
    } else {
        console.log('2222222222')

      // 加载数据列表
    }
  }
  const scrollDisabled = () =>{
    console.log(renderDataList.length >= listCount.value,'9999999')
   return  renderDataList.length >= listCount.value
  } 
  function getSessionlist() {
		let data = {
			userid: useStore.userIds,
			page: base.listpage,
			title : base.keyword
		};
		if(base.listpage == 1){
			base.sessionlist = [];
		}
		api.sessionlist(data).then((res) => {
			renderDataList.value = [...renderDataList.value,...res.data];
			base.listLoad = false;
			if(res.data.length < 50){
				base.noMoreDataList = true;
			}
			if(res.data.length > 0){
				base.isNone = false;
			}else{
				base.isNone = true;
			}

			
		});
	}
    onMounted(()=>{
        getSessionlist();
    })
</script>
<style lang="scss" scoped>
.box{
   
}
.infinite-list {
  height: 300px;
  padding: 0;
  margin: 0;
  list-style: none;
}
.infinite-list .infinite-list-item {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 50px;
  background: var(--el-color-primary-light-9);
  margin: 10px;
  color: var(--el-color-primary);
}
.infinite-list .infinite-list-item + .list-item {
  margin-top: 10px;
} 
</style>